import type { GreasyForkElements } from '../../../../../../../../types/constants/personalization/greasy_fork'
import { ToolKit } from '../../../../../../../../lib/utils/toolkit'
import {
  PAGE_ELEMENTS,
  PROJECT_PREFIX,
  SUPPORTED_PLATFORMS,
} from '../../../../../../../../types/constants'
import { SYMBOLS } from '../../../../../../../../types/interfaces'
import { CommonPage } from './common'

// 测试链接：https://greasyfork.org/zh-CN
export class IndexPage {
  elements: GreasyForkElements = PAGE_ELEMENTS[SUPPORTED_PLATFORMS.GREASY_FORK]
  private static instance: IndexPage
  private commonPage: CommonPage = CommonPage.getInstance()

  /**
   * 获取单例实例
   */
  public static getInstance(): IndexPage {
    if (!IndexPage.instance) {
      IndexPage.instance = new IndexPage()
    }
    return IndexPage.instance
  }

  init(): void {
    this.replaceHyphensInLiText()
  }

  /**
   * 替换 li 自身文本中的破折号（不包括子元素）
   */
  replaceHyphensInLiText(): void {
    $('#home-step-2 ul li').each((_index, element) => {
      const directTextNodes = ToolKit.ui.element.getDirectTextNodes(element)

      // 处理直接文本节点
      directTextNodes.forEach((node) => {
        if (!node.nodeValue)
          return

        const newText = node.nodeValue?.trim()
          .replace(/ - /g, '   ')
          .replace(/ — /g, '   ')
          .replace(/-/g, ' ')
          .replace(/—/g, ' ')

        if (newText !== node.nodeValue) {
          node.nodeValue = newText
        }
      })
    })
  }

  getMainStyles(): string {
    return `
.text-content {
  background-color: var(--${PROJECT_PREFIX}-theme-bg-base) !important;
  color: var(--${PROJECT_PREFIX}-theme-text-secondary) !important;
  border: none !important;
  box-shadow: none !important;
  margin-top: 0 !important;
  
  .super-title {
    margin-top: 0 !important;
    padding-top: 16px !important;
    font-size: 2rem !important;
    font-weight: 800 !important;
    color: var(--${PROJECT_PREFIX}-theme-text-primary) !important;
    text-align: center;
    background: linear-gradient(135deg, #9400D3 0%, #FF1493 50%, #1a1a1a 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    position: relative;
    line-height: 1.2 !important;
    letter-spacing: -0.5px !important;
  }
  
  .home-search {
    display: flex !important;
    align-items: center !important;
    
    input[type="search"] {
      border-radius: 10px !important;
      padding: 10px 20px !important;
    }
    
    input[type="submit"] {
      display: inline-flex !important;
      position: relative !important;
      right: 40px !important;
    }
  }
  
  #home-script-nav {
    border: none !important;
  }
  
  a {
    ${this.commonPage.linkStyles()}
  }
  
  #home-step-2 ul {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-left: 0 !important;
    overflow: visible !important;
    max-height: none !important;
    
    li {
      background: linear-gradient(135deg, 
        rgba(59, 130, 246, 0.1) 0%, 
        rgba(168, 85, 247, 0.1) 50%,
        rgba(236, 72, 153, 0.1) 100%);
      border-radius: 12px;
      padding: 10px 60px 10px 10px !important;
      margin: 0;
      transition: all 0.3s ease;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
      position: relative;
      min-height: 50px;
      
      &::after {
        content: "${SYMBOLS.OTHERS.FIRE}";
        position: absolute;
        top: 16px;
        right: 16px;
        font-size: 20px;
        opacity: 0.7;
      }
      
      &:nth-child(1) {
        border-left: 4px solid #ef4444; /* 红色 */
      }
      &:nth-child(2) {
        border-left: 4px solid #10b981; /* 绿色 */
      }
      &:nth-child(3) {
        border-left: 4px solid #f59e0b; /* 橙色 */
      }
      &:nth-child(4) {
        border-left: 4px solid #8b5cf6; /* 紫色 */
      }
      &:nth-child(5) {
        border-left: 4px solid #06b6d4; /* 青色 */
      }

      .script-description {
        font-size: 14px;
        line-height: 1.6;
        margin: 10px 0 !important;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }
}
`
  }
}
